import React,{useState} from 'react';


export const ReactXN = ()=>{
    const [count,setCount] = useState(0);
    const [flag,setFlag]=useState(false);

    return(
        <>
            <h1>数量{count}</h1>
            <button onClick={()=>setCount(count+1)}>+1</button>
            {flag && <h1>显示</h1>}
            <button onClick={()=>{
                setFlag(e=>!e)
            }}>切换显示时 不希望渲染子组件</button>
            <SonFun num={count}></SonFun>
        </>
    )
}

// 直接使用 React.memo() 抱住子组件即可
export const SonFun = React.memo((props:{num:number})=>{
    console.log('子组件被渲染')
    return(
        <>
            <h1>子组件</h1>
            <h1>数量{props.num}</h1>
        </>
    )
})